<template>
    <div class="p10">
        <a-row :gutter="24">
            <a-col :xs="24" :sm="24" :md="12" :xl="6" :style="{ marginBottom: '20px' }">
                <div class="small-panel suspension">
                    <div class="small-panel-title">会员注册量</div>
                    <div class="small-panel-cnt d-flex-between">
                        <div class="small-panel-cnt-left d-flex d-flex-middle">
                            <svg style="width: .8em;height: .8em;vertical-align: middle;fill: rgb(133 149 244);overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9871"><path d="M112.270505 64.303538l31.978319 0 0 863.413582 767.479649 0 0 31.978319L112.270505 959.695438 112.270505 64.303538zM400.075373 448.043363l0 415.71712-191.869912 0 0-223.848231L400.075373 448.043363zM655.901922 480.021681l0 383.738801-191.869912 0L464.03201 448.043363l95.934956 127.912251L655.901922 480.021681zM911.728472 288.151769l0 575.608713-191.869912 0L719.85856 448.043363 911.728472 288.151769zM240.183779 512l-31.978319-31.978319 223.848231-223.848231 127.913275 127.913275 255.82655-223.848231-63.956637-63.956637 159.891593 0 0 159.891593-63.956637-63.956637-287.804868 255.82655-127.913275-127.913275L240.183779 512z" p-id="9872"></path></svg>
                            <span>5,456</span>
                        </div>
                        <div class="content-right">+14%</div>
                    </div>
                </div>
            </a-col>
            <a-col :xs="24" :sm="24" :md="12" :xl="6" :style="{ marginBottom: '20px' }">
                <div class="small-panel suspension">
                    <div class="small-panel-title">附件上传量</div>
                    <div class="small-panel-cnt d-flex-between">
                        <div class="small-panel-cnt-left d-flex d-flex-middle">
                            <svg class="icon" style="width: .8em;height: .8em;vertical-align: middle;fill: rgb(173, 133, 244);overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7607"><path d="M961.28 414.464v508.928c0 55.104-42.752 99.52-95.872 99.52H158.016c-52.928 0-95.872-44.48-95.872-99.392V100.224c0-54.784 43.072-99.392 95.552-99.392h406.016v348.544c0 35.904 28.16 65.088 62.528 65.088h335.04z m-17.472-64.96L626.176 19.008v330.368c0-0.064 0.128 0.128 0.064 0.128h317.568z m-723.52 64.96h208.128c17.28 0 31.232-14.592 31.232-32.512s-13.952-32.448-31.232-32.448H220.288c-17.216 0-31.168 14.528-31.168 32.448s13.952 32.512 31.168 32.512z m0 216.512h582.784c17.216 0 31.232-14.528 31.232-32.448 0-17.984-14.016-32.512-31.232-32.512H220.288c-17.216 0-31.168 14.528-31.168 32.512 0 17.92 13.952 32.448 31.168 32.448z" p-id="7608"></path></svg>
                            <!-- <svg style="width: 1em;height: 1em;vertical-align: middle;fill: rgb(173, 133, 244);overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11577"><path d="M651.0592 321.536h99.4304c12.1856 0 18.3296-14.9504 9.6256-23.552L643.1744 180.9408c-8.6016-8.6016-23.2448-2.4576-23.2448 9.8304v99.2256c-0.1024 30.0032 31.1296 31.5392 31.1296 31.5392zM765.0304 373.0432H645.4272s-76.4928-5.9392-76.4928-77.312V174.1824c0-12.4928-10.0352-22.528-22.3232-22.528H262.144s-25.4976 1.7408-25.4976 25.8048v669.184S238.3872 872.448 262.144 872.448h499.712s25.4976 0.1024 25.4976-25.8048V395.5712c0-12.4928-10.0352-22.528-22.3232-22.528zM633.0368 727.552H391.9872c-12.288 0-22.3232-10.1376-22.3232-22.528s10.0352-22.528 22.3232-22.528h241.0496c12.288 0 22.3232 10.1376 22.3232 22.528s-10.0352 22.528-22.3232 22.528z m0-113.664H391.9872c-12.288 0-22.3232-10.1376-22.3232-22.528s10.0352-22.528 22.3232-22.528h241.0496c12.288 0 22.3232 10.1376 22.3232 22.528s-10.0352 22.528-22.3232 22.528z m0-113.7664H391.9872c-12.288 0-22.3232-10.1376-22.3232-22.528s10.0352-22.528 22.3232-22.528h241.0496c12.288 0 22.3232 10.1376 22.3232 22.528s-10.0352 22.528-22.3232 22.528z" p-id="11578"></path></svg> -->
                            <span>1214</span>
                        </div>
                        <div class="content-right">+50%</div>
                    </div>
                </div>
            </a-col>
            <a-col :xs="24" :sm="24" :md="12" :xl="6" :style="{ marginBottom: '20px' }">
                <div class="small-panel suspension">
                    <div class="small-panel-title">会员总数</div>
                    <div class="small-panel-cnt d-flex-between">
                        <div class="small-panel-cnt-left">
                            <div class="small-panel-cnt-left d-flex d-flex-middle">
                                <svg class="icon" style="width: .8em;height: .8em;vertical-align: middle;fill: rgb(116, 168, 181);overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15190"><path d="M511.68 4.8 511.68 512l507.2 0C1018.88 512 1045.248 64.384 511.68 4.8zM464.128 37.696 464.128 559.36l507.2 0c0 0-21.184 459.84-491.392 459.84 0 0-475.52 7.936-475.52-459.648C4.48 559.552-27.2 97.088 464.128 37.696z" p-id="15191"></path></svg>
                                <!-- <svg class="icon" style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15175"><path d="M916.659785 888.698454 104.554776 888.698454c-23.223934 0-42.006719-18.806321-42.006719-42.007743L62.548056 174.630273c0-23.199375 18.782785-41.99444 42.006719-41.99444 23.176862 0 42.006719 18.794042 42.006719 41.99444l0 532.050662 0 98.005105 770.099313 0c23.176862 0 42.007743 18.804275 42.007743 42.004673C958.666504 869.892133 939.836647 888.698454 916.659785 888.698454M818.626028 762.682389l-84.013439 0c-23.176862 0-42.007743-18.795065-42.007743-41.993416l0-294.02657c0-23.212678 18.829857-42.004673 42.007743-42.004673l84.013439 0c23.224957 0 42.008766 18.795065 42.008766 42.004673l0 294.02657C860.63377 743.887324 841.852008 762.682389 818.626028 762.682389M580.602959 762.682389l-84.013439 0c-23.200398 0-42.007743-18.795065-42.007743-41.993416L454.581778 258.641665c0-23.200398 18.807345-42.005696 42.007743-42.005696l84.013439 0c23.199375 0 42.006719 18.805298 42.006719 42.005696l0 462.046285C622.609679 743.887324 603.803357 762.682389 580.602959 762.682389M342.578868 762.682389l-84.013439 0c-23.223934 0-42.006719-18.795065-42.006719-41.993416l0-84.012416c0-23.198352 18.782785-42.004673 42.006719-42.004673l84.013439 0c23.200398 0 42.007743 18.806321 42.007743 42.004673l0 84.012416C384.585587 743.887324 365.779266 762.682389 342.578868 762.682389" fill="#272636" p-id="15176"></path></svg> -->
                                <span>1,234</span>
                            </div>
                            
                        </div>
                        <div class="content-right">+28%</div>
                    </div>
                </div>
            </a-col>
            <a-col :xs="24" :sm="24" :md="12" :xl="6" :style="{ marginBottom: '20px' }">
                <div class="small-panel suspension">
                    <div class="small-panel-title">已装插件数</div>
                    <div class="small-panel-cnt d-flex-between">
                        <div class="small-panel-cnt-left">
                            <div class="small-panel-cnt-left d-flex d-flex-middle">
                                <svg class="icon" style="width: .8em;height: .8em;vertical-align: middle;fill: rgb(244, 133, 149);overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="16865"><path d="M92.161024 959.998976l839.68 0c15.552512 0 28.16-12.608512 28.16-28.16s-12.608512-28.16-28.16-28.16l-811.52 0 0-811.52c0-15.552512-12.608512-28.16-28.16-28.16s-28.16 12.608512-28.16 28.16l0 839.68C64.001024 947.391488 76.608512 959.998976 92.161024 959.998976zM227.963904 740.834304c32.945152 0 59.646976-30.339072 59.646976-67.757056 0-9.02656-1.56672-17.634304-4.386816-25.509888l117.758976-153.7536c5.638144 2.00704 11.634688 3.09248 17.854464 3.09248 17.381376 0 33.01888-8.449024 43.91936-21.921792l111.181824 63.333376c0.359424 37.067776 26.919936 67.002368 59.629568 67.002368 32.945152 0 59.648-30.340096 59.648-67.75808 0-1.2544-0.034816-2.496512-0.094208-3.73248l154.882048-151.143424c7.387136 3.723264 15.553536 5.807104 24.154112 5.807104 32.946176 0 59.648-30.332928 59.648-67.75808 0-37.419008-26.701824-67.757056-59.648-67.757056-32.932864 0-59.646976 30.338048-59.646976 67.757056 0 7.71072 1.149952 15.112192 3.238912 22.017024l-145.00864 141.837312c-10.196992-9.245696-23.110656-14.78656-37.173248-14.78656-16.21504 0-30.912512 7.364608-41.665536 19.29728l-113.573888-64.602112c-2.105344-35.248128-27.923456-63.108096-59.491328-63.108096-32.934912 0-59.648 30.339072-59.648 67.75808 0 10.267648 2.0224 19.995648 5.62176 28.717056L248.922112 609.631232c-6.520832-2.78016-13.581312-4.312064-20.958208-4.312064-32.934912 0-59.648 30.338048-59.648 67.75808C168.315904 710.495232 195.028992 740.834304 227.963904 740.834304z" p-id="16866"></path></svg>
                                <span>1,234</span>
                            </div>
                            
                        </div>
                        <div class="content-right">+88%</div>
                    </div>
                </div>
            </a-col>
        </a-row>
        <a-row :gutter="24">
            <a-col :xs="24" :sm="24" :md="12" :xl="9" :style="{ marginBottom: '20px' }">
                <div class="cartbox">
                    <div class="cartbox-hd d-flex d-flex-middle">采购统计情况</div>
                    <div class="cartbox-bd">
                        <div style="height:260px;width:100%" id="bar-main"></div>
                    </div>
                </div>
            </a-col>
            <a-col :xs="24" :sm="24" :md="12" :xl="9" :style="{ marginBottom: '20px' }">
                <div class="cartbox">
                    <div class="cartbox-hd d-flex d-flex-middle">门店销售统计</div>
                    <div class="cartbox-bd echarts-box">
                        <div style="height:260px;width:100%" id="line-main"></div>
                    </div>
                </div>
            </a-col>
            <a-col :xs="24" :sm="24" :md="12" :xl="6" :style="{ marginBottom: '20px' }">
                <div class="cartbox">
                    <div class="cartbox-hd d-flex d-flex-between d-flex-middle">
                        <em>最新采购</em>
                        <svg class="icon" style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3880"><path d="M698.181818 546.909091a35.141818 35.141818 0 0 1-24.669091-10.24l-372.363636-372.363636a34.909091 34.909091 0 0 1 49.338182-49.338182l372.363636 372.363636a34.676364 34.676364 0 0 1 0 49.338182 35.141818 35.141818 0 0 1-24.669091 10.24z" fill="#666666" p-id="3881"></path><path d="M325.818182 919.272727a35.141818 35.141818 0 0 1-24.669091-10.24 34.676364 34.676364 0 0 1 0-49.338182l372.363636-372.363636a34.909091 34.909091 0 0 1 49.338182 49.338182l-372.363636 372.363636a35.141818 35.141818 0 0 1-24.669091 10.24z" fill="#666666" p-id="3882"></path></svg>
                    </div>
                    <div class="growth">
                        <div class="g-scrollbar">
                            <div class="g-item">
                                <img class="g-item-img" src="http://mozhe.oss-cn-hangzhou.aliyuncs.com/mz/20231028/81253.jpg" />
                                <div class="g-item-info d-flex-item">
                                    <div class="font15 mb">生菜</div>
                                    <div class="d-flex d-flex-between">
                                        <div class="font12 color-999">数量：1000斤</div>
                                        <div class="color-hold font12">2024-02-04 13:34:42</div>
                                    </div>
                                </div>
                            </div>
                            <div class="g-item">
                                <img class="g-item-img" src="http://mozhe.oss-cn-hangzhou.aliyuncs.com/mz/20231030/92604.jpg" />
                                <div class="g-item-info d-flex-item">
                                    <div class="font15">青苹果</div>
                                    <div class="d-flex d-flex-between">
                                        <div class="font12 color-999">数量：1000斤</div>
                                        <div class="color-hold font12">2024-02-04 13:34:42</div>
                                    </div>
                                </div>
                            </div>
                            <div class="g-item">
                                <img class="g-item-img" src="http://mozhe.oss-cn-hangzhou.aliyuncs.com/mz/20231121/40563.jpg" />
                                <div class="g-item-info d-flex-item">
                                    <div class="font15">青苹果</div>
                                    <div class="d-flex d-flex-between">
                                        <div class="font12 color-999">数量：1000斤</div>
                                        <div class="color-hold font12">2024-02-04 13:34:42</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </a-col>
        </a-row>
    </div>
</template>
<script setup lang="ts">
import { reactive,ref,onMounted,computed } from 'vue';
import * as echarts from "echarts";
onMounted(() => {
    initBar();
    initline();
});
function initline(){
    const option = {
        tooltip: {
            trigger:'axis'
        },
        grid: {
            top: 30,
            right: 0,
            bottom: 0,
            left: 0,
            containLabel: true,
        },
        xAxis: {
            type: 'category',
            data: ['周一','周二','周三','周四','周五','周六','周天'],
        },
        yAxis: {
            type:'value'
        },
        legend: {
            data: ['销售量'],
            textStyle: {
                color: '#73767a',
            },
        },
        series: [
            {
                name: '销售量',
                data: [100, 160, 280, 230, 190, 200, 480],
                type: 'line',
                smooth: true,
                areaStyle: {
                    color: '#8595F4',
                    opacity: 0.4,
                },
            },
            // {
            //     name: '注册量',
            //     data: [45, 180, 146, 99, 210, 127, 288],
            //     type: 'line',
            //     smooth: true,
            //     areaStyle: {
            //         color: '#F48595',
            //         opacity: 0.5,
            //     },
            // },
        ],
    }
    let chartDom = document.getElementById("line-main");
    if (chartDom) {
        let myChartLine = echarts.init(chartDom);
        option && myChartLine.setOption(option);
        window.addEventListener("resize", function () {
            myChartLine.resize()
        });
    }
}
function initBar(){
    let option = {
        tooltip: {
            trigger:'axis'
        },
        legend:{
            top:0,
        },
        xAxis: {
            type: 'category',
            data: ['周一','周二','周三','周四','周五','周六','周天']
        },
        yAxis: {},
        grid:{
            top:30,
            left:0,
            right:0,
            bottom:0,
            containLabel: true,
        },
        series: [
            {
                name: "采购量",
                type: "bar",
                yAxisIndex: 0,
                data: [3, 24, 18, 25, 27, 28,36],
                barWidth:26,
                itemStyle:{
                    color: '#20d6cc'
                }
            }
		],
    }
    let chartDom = document.getElementById("bar-main");
    if (chartDom) {
        let myChartBar = echarts.init(chartDom);
        option && myChartBar.setOption(option);
        window.addEventListener("resize", function () {
            myChartBar.resize()
        });
    }
}
function initPie(){
  let option = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      top: '5%',
      left: 'center'
    },
    series: [
      {
        name: '摸鱼次数',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '40',
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: [
          { value: 10, name: '初晓' },
          { value: 8, name: '善逸' },
          { value: 3, name: '胡克' },
          { value: 1, name: '罗伊' },
        ]
      }
    ]
  };
  let chartDom = document.getElementById("pie-main");
  if (chartDom) {
    let myChart = echarts.init(chartDom);
    option && myChart.setOption(option);
  }
}

</script>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'Home'
})
</script>
<style>
.suspension{
    transition: all .3s ease;
}
.suspension:hover{
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 14px 24px #0003;
    z-index: 999;
}
.small-panel{
    background-color: #e9edf2;
    border-radius: 8px;
    padding: 25px;
    cursor:pointer
}
.small-panel-title{
    color: #92969a;
    font-size: 15px;
}
.small-panel-cnt{
    display: flex;
    align-items: flex-end;
    margin-top: 20px;
    color: #2c3f5d;
}
.small-panel-cnt-left{
    font-size:28px
}
.small-panel-cnt-right{
    font-size: 18px;
    margin-left: auto;
}
.cartbox{
    background-color:#ffffff;
    border-radius:8px;
    color:#303133;
    cursor:pointer;
    transition: all .3s ease;
}
.cartbox-hd{
    /* padding:20px; */
    padding-left:20px;
    padding-right:20px;
    height:60px;
    border-bottom:solid 1px #f2f6fc
}
.cartbox-bd{
    padding:20px
}
.cartbox:hover{
    box-shadow: 0 0 12px rgba(0,0,0,.12);
}
.echarts-box{
    display: flex;
    align-items: center;
    justify-content: center;
}
.pie-main{
    width: 260px;
    height: 260px;
    background: #fff;
}
.growth{
    height:300px;
}
.g-scrollbar{
    overflow: hidden;
    position: relative;
    height: 100%
}

.g-item{
    display: flex;
    align-items: center;
    padding: 20px;
    margin: 10px 15px;
    box-shadow: 0 0 30px #523f690d;
    background:#ffffff
}
.g-item-img{
    width:48px;
    height:48px;
    border-radius:50%;
    box-shadow: 0 0.3125rem 0.75rem rgb(0 0 0 / 5%);
}
.g-item-info{
    margin-left: 10px;
    color: #2c3f5d;
}
</style>